<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="昵称" prop="nickName">
				<el-input v-model="queryParams.nickName" placeholder="昵称" clearable />
			</el-form-item>
			<el-form-item label="订单类型" prop="">
				<el-select v-model="queryParams.orderType" placeholder="请选择">
					<el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间" prop="">
				<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" @change="pickChange">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
			</el-form-item>
		</el-form>

		<!-- <el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				
			</el-col>
		</el-row> -->
		<div style="display: flex;justify-content: space-around;">
			<el-card style="width:32%;">
				<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
					<div
						style="background-color: #e4ecff;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
						<div
							style="background-color: #4d7cfe;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
							<img style="width: 30px;height: 30px;" src="../../../assets/images/12.png" alt="" />
						</div>
					</div>
					<div class="boxN">
		
						<div class="tetx">线上支付金额(元)</div>
						<div class="nums">{{jeData.onlineAmount}}</div>
					</div>
		
				</div>
			</el-card>
			<el-card style="width:32%;">
				<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
					<div
						style="background-color: #fff3e0;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
						<div
							style="background-color: #ffab2b;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
							<img style="width: 30px;height: 30px;" src="../../../assets/images/12.png" alt="" />
						</div>
					</div>
					<div class="boxN">
						<div class="tetx">线下支付金额(元)</div>
						<div class="nums">{{jeData.offlineAmount}}</div>
		
					</div>
		
				</div>
			</el-card>
			<el-card style="width:32%;">
				<div class="card-flex" style="cursor:pointer;margin-left: 10px;">
					<div
						style="background-color: #ffeaf4;width: 60px;height: 60px;border-radius: 30px;margin-right: 30px;display: flex;justify-content: center;align-items: center;">
						<div
							style="background-color: #ff85c0;width: 50px;height: 50px;border-radius: 25px;display: flex;justify-content: center;align-items: center;">
							<img style="width: 30px;height: 30px;" src="../../../assets/images/12.png" alt="" />
						</div>
					</div>
					<div class="boxN">
						<div class="tetx">缴费金额(元)</div>
						<div class="nums">
							{{jeData.amount}}
						</div>
					</div>
				</div>
			</el-card>
		</div>
		<div style="height: 10px;"></div>
		<el-table v-loading="loading" :data="orderList">
			<el-table-column show-overflow-tooltip label="昵称" align="center" prop="nickName">
			</el-table-column>
			<el-table-column label="学生姓名" align="center" prop="name" />
			<el-table-column label="毕业类型" align="center" prop="graduate" />
			<el-table-column label="学历" align="center" prop="background" />
			<el-table-column label="专业" align="center" prop="majorName" />
			<el-table-column label="产品名称" align="center" prop="productName" />
			<el-table-column label="订单金额" align="center" prop="totalFee" />
			<el-table-column label="来源" align="center" prop="understand" />
			<el-table-column label="支付状态" align="center" prop="payStatus" />
			<el-table-column label="退款状态" align="center" prop="refundStatus" />
			<el-table-column label="支付时间" align="center" prop="payTime" />
			<el-table-column label="订单类型" align="center" prop="orderType" />
			<el-table-column width="100" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-if="scope.row.orderType == '线上付款'" size="mini" type="primary" style="padding: 10px 10px;"
						@click="tkBtn(scope.row)">退款</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<el-dialog title="退款" :visible.sync="open" width="600px" append-to-body @close="cancel">
			<el-form ref="form" :model="tkform" :rules="rules" label-width="80px">
				<el-form-item label="退款金额" prop="refundFee">
					<el-input v-model="tkform.refundFee" placeholder="退款金额" type="number" maxlength="30" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		orderListApi,
		tkApi,
		orderCount
	} from "@/api/all/userApi";
	export default {
		name: "Documentary",
		data() {
			return {
				value1: '',
				sourceList: [{
						id: 1,
						name: '线上付款'
					},
					{
						id: 2,
						name: '后台开通'
					}
				],
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					nickName: '',
					orderType: '',
					endTime: '',
					startTime: ''
				},
				dialogVisible: false,
				orderList: [], //存取后端获取客户列表
				DetailVisible: false,
				tkform: {
					refundFee: '',
					orderId: ''
				},
				rules: {
					refundFee: [{
						required: true,
						message: "请填写退款金额",
						trigger: "blur"
					}],
				},
				jeData:{}
			};
		},
		created() {
			this.getList();
			this.getorderCount()
			// console.log(this.$store.state.user.nickName, 'nickName');
		},
		methods: {
			getorderCount(){
				orderCount(this.queryParams).then(res=>{
					console.log(res,'res金额信息');
					this.jeData = res.data
				})
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('web/order/export', {
					...this.queryParams
				}, `订单.xlsx`)
			},
			// one
			pickChange(e) {
				console.log(e, 'epicker', this.value1);
				if (e) {
					this.queryParams.startTime = this.parseTime(e[0], '{y}-{m}-{d}')
					this.queryParams.endTime = this.parseTime(e[1], '{y}-{m}-{d}')
				} else {
					this.queryParams.startTime = ''
					this.queryParams.endTime = ''
				}
				console.log(this.queryParams, 'this.startTime');
			},
			// 弹层确定
			submitForm() {
				console.log(this.tkform, 'form');
				this.$refs["form"].validate(valid => {
					if (valid) {
						tkApi(this.tkform).then(res => {
							console.log(res, 'res退款');
							this.$modal.msgSuccess(res.msg);
							this.open = false
							this.getList();
						})
					}
				});
			},
			// 弹层取消
			cancel() {
				this.open = false
				this.$refs.form.resetFields();
			},
			// 退款
			tkBtn(row) {
				console.log(row, 'row');
				this.tkform.orderId = row.orderId
				this.open = true

				// let data = {
				// 	orderId:row.orderId
				// }
				// this.$modal.confirm('是否确认退款').then(() => {
				// 	console.log(2);
				// 	tkApi(data).then(res => {
				// 		console.log(res, 'res退款');
				// 		this.$modal.msgSuccess(res.msg);
				// 		this.getList();
				// 	})
				// }).catch(() => {
				// 	// console.log('取消');
				// });
			},
			// 详情
			handleDetail(e) {
				console.log(e);
				this.genJinDetail = e
				this.DetailVisible = true
			},

			/** 查询跟单详情列表 */
			getList() {
				this.loading = true;
				orderListApi(this.queryParams).then(response => {
					console.log(response, 'response');
					this.orderList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
				this.getorderCount()
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						nickName: '',
						orderType: '',
						endTime: '',
						startTime: ''
					},
				this.value1 = ''
				this.handleQuery();
				this.getorderCount()
			},
		}
	};
</script>
<style lang="scss" scoped>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}
	.card-flex {
		display: flex;
		align-items: center;
		padding: 10px 0;
	
		// color: #fff;
		.boxN {
			// margin-top: 20px;
		}
	
		.tetx {
			margin-bottom: 8px;
			color: #767575;
			font-size: 15px
		}
	
		.nums {
			font-size: 20px;
			color: #000;
			// font-weight: 700;
		}
	}
</style>